<template>
  <div>
    <div class="screen-search layout-container out-border">
      <div class="screen-header d-flex justify-content-between">
        <div class="screen-l">
          <i class="el-icon-search"></i>
          <span class="txt">筛选搜索</span>
        </div>
        <div class="screen-r">
          <el-button size="mini">重置</el-button>
          <el-button type="primary" @click.prevent="handlesearchOrders" size="mini">查询结果</el-button>
        </div>
      </div>
      <div class="submit-container">
        <el-form ref="orderForm" :model="orderForm" class="form-conten t d-flex flex-wrap">
          <div class="form-item mb-3 d-flex">
            <label class="form-item-title">输入搜索:</label>
            <el-input v-model="orderForm.orderSn" placeholder="订单编号" class="input-size"></el-input>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">收货人:</label>
            <el-input v-model="orderForm.receiverKeyword" placeholder="收货人姓名/手机号码" class="input-size"></el-input>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">提交时间:</label>
            <div class="block">
              <el-date-picker v-model="orderForm.createTime" type="date" placeholder="请选择日期" class="input-size"> </el-date-picker>
            </div>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">订单状态:</label>
            <el-select v-model="orderForm.status" placeholder="全部">
              <el-option v-for="item in orderForm.status" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">订单分类:</label>
            <el-select v-model="orderForm.orderType" placeholder="全部">
              <el-option v-for="item in orderForm.orderType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">订单来源:</label>
            <el-select v-model="orderForm.sourceType" placeholder="全部">
              <el-option v-for="item in orderForm.sourceType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </el-form>
      </div>
    </div>
    <div class="dataList out-border d-flex justify-content-between layout-top">
      <div class="screen-l">
        <i class="el-icon-tickets"></i>
        <span class="txt">数据列表</span>
      </div>
      <el-button size="mini" @click="() => this.$router.push('/pms/addProduct')">添加</el-button>
    </div>
    <div class="layout-top">
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column width="60" type="selection" align="center"> </el-table-column>
        <el-table-column prop="id" label="编号" width="90" align="center"> </el-table-column>
        <el-table-column prop="orderSn" label="订单名称" width="190" align="center"> </el-table-column>
        <el-table-column label="提交时间" width="190" align="center">
          <template slot-scope="scope">
            <div>{{ handlerTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" width="120" align="center"> </el-table-column>
        <el-table-column label="订单金额" width="110" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.totalAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="支付方式" width="110" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.payType == 0">未支付</div>
            <div v-else-if="scope.row.payType == 1">支付宝</div>
            <div v-else-if="scope.row.payType == 2">微信</div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单来源" width="110" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.sourceType == 1">App订单</div>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" width="102" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未付款</div>
            <div v-else-if="scope.row.status == 1">待发货</div>
            <div v-else-if="scope.row.status == 2">已发货</div>
            <div v-else-if="scope.row.status == 3">已完成</div>
            <div v-else-if="scope.row.status == 4">已关闭</div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="195" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkOrder(scope.row.id)">查看订单</el-button>
            <el-button size="mini" @click="closeOrder(scope.row.id)" v-if="scope.row.status == 0">关闭订单</el-button>
            <el-button size="mini" @click="orderSell(scope.row.id)" v-else-if="scope.row.status == 1">订单发货</el-button>
            <el-button size="mini" @click="orderTrack(scope.row.id)" v-else-if="scope.row.status == 2">订单跟踪</el-button>
            <el-button size="mini" @click="orderTrack(scope.row.id)" v-else-if="scope.row.status == 3">订单跟踪</el-button>
            <el-button size="mini" type="danger" @click="open(scope.row.id)" v-else-if="scope.row.status == 4">删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 d-flex justify-content-between">
        <div>
          <el-select v-model="value" placeholder="批量处理">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-button type="primary" size="mini">确定</el-button>
        </div>
        <div class="block" style="float: right">
          <el-pagination
            :background="true"
            @size-change="getOrderList"
            @current-change="getOrderList"
            :current-page.sync="query.pageNum"
            :page-sizes="[5, 10, 15]"
            :page-size.sync="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="订单跟踪" :visible.sync="dialogTableVisible">
      <div>
        <el-steps direction="vertical" :active="6" finish-status="success">
          <el-step title="订单已提交, 等待付款" description="2017-04-01 12:00:00"></el-step>
          <el-step title="订单付款成功" description="2017-04-01 12:00:00"></el-step>
          <el-step title="在北京市进行下级地点扫描，等待付款" description="2017-04-01 12:00:00"></el-step>
          <el-step title="在分拨中心广东深圳公司进行卸车扫描，等待付款" description="2017-04-01 12:00:00"></el-step>
          <el-step title="在广东深圳公司进行发出扫描" description="2017-04-01 12:00:00"></el-step>
          <el-step title="到达目的地网点广东深圳公司，快件将很快进行派送" description="2017-04-01 12:00:00"></el-step>
          <el-step title="订单已签收，期待再次为您服务" description="2017-04-01 12:00:00"></el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchOrderList, fetchCheckOrder } from '@/api/api'
import { mkfsTime, removeProductItem } from '@/utils/utils'
export default {
  name: '',
  data() {
    return {
      orderForm: {
        //输入搜索
        orderSn: '',
        // 收货人
        receiverKeyword: '',
        //提交时间
        createTime: '',
        //订单状态
        status: '',
        //订单分类
        orderType: '',
        // 订单来源
        sourceType: '',
      },
      orderList: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 5,
      },
      dialogTableVisible: false,
    }
  },
  methods: {
    async getOrderList() {
      let res = await fetchOrderList(this.query)
      this.orderPaging = { ...res.data }
      this.total = res.data.total
      this.orderList = res.data.list
    },
    handlerTime(time) {
      return mkfsTime(time)
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          removeProductItem(this.orderList, id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    checkOrder(id) {
      this.$router.push({ path: '/oms/orderDetail', query: { id } })
    },
    async handlesearchOrders() {
      let res = await fetchOrderList(this.orderForm)
      this.orderPaging = { ...res.data }
      this.total = res.data.total
      this.orderList = res.data.list
    },
    // 关闭订单
    closeOrder() {},
    // 订单发货
    async orderSell(id) {
      let { data: list } = await fetchCheckOrder(id)
      this.$router.push({ path: '/oms/DeliverOrderList', query: { list } })
    },
    // 订单跟踪
    orderTrack() {
      this.dialogTableVisible = true
    },
  },
  created() {
    this.getOrderList()
    this.handlerTime()
  },
}
</script>
<style lang="scss" scoped>
.submit-container {
  margin-top: 15px;
}
::v-deep .el-dialog {
  width: 40% !important;
}
.form-item-title {
  min-width: 110px;
  text-align: right;
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
  line-height: 2.5;
}
.input-size {
  width: 203px;
  font-size: 13px;
}
.dataList {
  padding: 18px 20px;
}
</style>
